<!--
* @Description SubComponent_2 这是孙子组件
* @author 三咲问道
* @date 2025/6/5
-->
<template>
<div class="SubComponent_2">
  <el-button type="primary" @click="add">加一</el-button>
  <el-button type="primary" plain @click="minus">减一</el-button>
  <div>这是孙子组件-- {{count}}</div>
  <div>这是孙子组件-provide-inject -- {{count_1}}</div>
</div>
</template>

<script setup lang="ts">
import {toRefs,inject} from "vue";

const props = defineProps({
  count:Number
})

const {count} = toRefs(props)
let count_1 = inject('count')

let $emit = defineEmits(['add_2', 'minus_2'])

const add = () => {
  $emit('add_2')
}
const minus = () => {
  $emit('minus_2')
}


</script>

<style scoped lang="less">
.SubComponent_2{
  height: 200px;
  margin: 12px 100px;
  background-color: #529b2e;
}
</style>